<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>11.小艺术家：循环#3</title>
    <link rel="stylesheet" type="text/css" href="../../res/index.css" />
    <script type="text/javascript" src="../../js/blockly_compressed.js"></script>
    <script type="text/javascript" src="../../js/javascript_compressed.js"></script>
    <script type="text/javascript" src="../js11/action_d2.js"></script>
    <script type="text/javascript" src="../js11/action_s.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.1/TweenMax.min.js"></script>
    <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <style>
        .btn-circle {
            width: 36px;
            height: 36px;
            text-align: center;
            padding: 6px 0;
            font-size: 16px;
            line-height: 1.428571429;
            border-radius: 18px;
            border: rgb(200,200,200) 2px solid;
        }
        .btn-circle.btn-lg {
            width: 50px;
            height: 50px;
            padding: 10px 16px;
            font-size: 18px;
            line-height: 1.33;
            border-radius: 25px;
        }
        .btn-circle.btn-xs {
            width: 6px;
            height: 6px;
            padding: 6px 6px;
            font-size: 5px;
            line-height: 1.33;
            border-radius: 35px;
        }
        .counter-text{
            text-anchor: end;
            font-size: 16px;
            font-family: Verdana, Geneva, sans-serif;
            font-weight: bold;
            fill: white;
            stroke: black;
            stroke-width: 1;
            cursor: default;
        }
    </style>

</head>
<body>
    <div class = "top">
        <ul>
            <li><a href="../../course1.html">课程分类</a></li>
            <li><a href="">项目</a></li>
            <li><a href="">关于</a></li>
            <div id="header-mid" class="col-lg-4" style="margin:5px;position: fixed;left: 25%;">
                <div style="margin-top: 8px;display:inline;">
                    <div class="col-lg-4"  style="padding: 8px 0px; text-align: center;display:inline;width: 30%;">
                        <a style="color: #ffffff; font-size: 16px" href="../../course1.html">课程11：小艺术家：循环</a>
                    </div>
                    <div class="col-lg-8" style="display: flex; flex-direction: row; background-color: rgb(244, 244, 244); border-radius: 5px; height: 40px; align-items: center; border:#b4b4b4 1px solid; width: 62%;">
                        <abbr title="1" style="border-bottom: transparent">
                            <button type="button" onclick="location.href='../course1-11.html'" class="btn btn-default btn-circle btn-xs" style="display: block; margin-left: 2px; margin-right: 2px"></button>
                        </abbr>
                        <abbr title="2" style="border-bottom: transparent">
                            <button type="button" onclick="location.href='course1-11-2.html'"  class="btn btn-default btn-circle btn-xs" style="display: block; margin-left: 2px; margin-right: 2px"></button>
                        </abbr>
                        <button type="button" onclick="location.reload()" class="btn btn-default btn-circle" style="display: block; margin-left: 1px; margin-right: 2px">
                            3
                        </button>
                        <abbr title="4" style="border-bottom: transparent">
                            <button type="button" onclick="location.href='course1-11-4.html'"  class="btn btn-default btn-circle btn-xs" style="display: block; margin-left: 2px; margin-right: 2px"></button>
                        </abbr>
                        <abbr title="5" style="border-bottom: transparent">
                            <button type="button" onclick="location.href='course1-11-5.html'"  class="btn btn-default btn-circle btn-xs" style="display: block; margin-left: 2px; margin-right: 2px"></button>
                        </abbr>
                        <abbr title="6" style="border-bottom: transparent">
                            <button type="button" onclick="location.href='course1-11-6.html'"  class="btn btn-default btn-circle btn-xs" style="display: block; margin-left: 2px; margin-right: 2px"></button>
                        </abbr>
                        <abbr title="7" style="border-bottom: transparent">
                            <button type="button" onclick="location.href='course1-11-7.html'"  class="btn btn-default btn-circle btn-xs" style="display: block; margin-left: 2px; margin-right: 2px"></button>
                        </abbr>
                        <abbr title="8" style="border-bottom: transparent">
                            <button type="button" onclick="location.href='course1-11-8.html'"  class="btn btn-default btn-circle btn-xs" style="display: block; margin-left: 2px; margin-right: 2px"></button>
                        </abbr>
                    </div>
                </div>
            </div>


        </ul>
    </div>
    <div data-radium="true" style="padding-left: 60px; padding-right: 10px; float: left; width: 100%; box-sizing: border-box; background-color: rgb(221, 221, 221); border-top-right-radius: 5px; border-top-left-radius: 5px;">
        <div data-radium="true" style="width: 100%; position: relative; float: left; height: 88px; margin-right: -300px;">
            <div class="csf-top-instructions" data-radium="true" style="padding: 5px 0px;">
                <div data-radium="true" style="position: relative;">
                    <div data-radium="true" style="background-color: white; border-radius: 10px; margin: 5px 0px; padding: 5px 76px 5px 10px; position: relative; border-style: dashed; border-width: 1px; border-color: white;">
                        <div style="overflow: hidden;">
                                <div  style="float:left";><img src="../res11/artist.png" style="width: 50px height:50px"></div>
                                <div id = "hint">通过两次向右完成这个小人的脚！</div>
                            </div></div></div></div></div>
    </div>
    <div id="visualization" style="position:absolute;top: 140px;left: 0px; height: 480px;width: 1080px">
        <div id="gamePanel" style="position: absolute;margin-left:25px;margin-top:20px;width: 400px;height: 480px">
            <?xml version="1.0" encoding="UTF-8" standalone="no"?>
            <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
            <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
                preserveAspectRatio="xMidYMid meet" viewBox="0 0 400 400" width="400" height="400">
                <defs>
                    <path
                        d="M223.64 84.3C223.64 98.1 212.44 109.3 198.64 109.3C184.85 109.3 173.64 98.1 173.64 84.3C173.64 70.5 184.85 59.3 198.64 59.3C212.44 59.3 223.64 70.5 223.64 84.3Z"
                        id="aTqXCUL0z"></path>
                    <mask id="maska5nNQ2t3pk" x="167.64" y="53.3" width="62" height="62" maskUnits="userSpaceOnUse">
                        <rect x="167.64" y="53.3" width="62" height="62" fill="white"></rect>
                        <use xlink:href="#aTqXCUL0z" opacity="1" fill="black"></use>
                    </mask>
                    <path d="M188.18 216.09L238.18 216.09L238.18 266.09L188.18 266.09L188.18 216.09Z" id="a1Xs8hnPAV">
                    </path>
                    <clipPath id="clipa1WY5a6nmM">
                        <use xlink:href="#a1Xs8hnPAV" opacity="1"></use>
                    </clipPath>
                    <path d="M247.29 139.92L149.61 140.7" id="a5ezeumsZj"></path>
                    <path d="M131.78 263.18L174.42 262.4L196.9 223.64L196.9 167.05L196.9 110.47" id="bF7paytbu"></path>
                    <path d="M221.71 262.4L196.9 223.64" id="f50cXQ93Za"></path>
                    <path d="M265.89 262.4L222.48 262.4" id="change"></path>
                </defs>
                <g>
                    <g>
                        <g>
                            <use xlink:href="#aTqXCUL0z" opacity="1" fill="#ffffff" fill-opacity="1"></use>
                            <g mask="url(#maska5nNQ2t3pk)">
                                <use xlink:href="#aTqXCUL0z" opacity="1" fill-opacity="0" stroke="#000000"
                                    stroke-width="6" stroke-opacity="1"></use>
                            </g>
                        </g>
                        <g>
                            <g id="artist" clip-path="url(#clipa1WY5a6nmM)" opacity="1">
                                <image
                                    xlink:href=""
                                    x="0" y="0" width="50" height="50"
                                    transform="matrix(1 0 0 1 188.17829457364337 216.08527131782944)"></image>
                            </g>
                        </g>
                        <g>
                            <g>
                                <use xlink:href="#a5ezeumsZj" opacity="1" fill-opacity="0" stroke="#000000"
                                    stroke-width="3" stroke-opacity="1"></use>
                            </g>
                        </g>
                        <g>
                            <g>
                                <use xlink:href="#bF7paytbu" opacity="1" fill-opacity="0" stroke="#000000"
                                    stroke-width="3" stroke-opacity="1"></use>
                            </g>
                        </g>
                        <g>
                            <g>
                                <use xlink:href="#f50cXQ93Za" opacity="1" fill-opacity="0" stroke="#000000"
                                    stroke-width="3" stroke-opacity="1"></use>
                            </g>
                        </g>
                        <g>
                            <use xlink:href="#change" opacity="1" fill="#ccdd63" fill-opacity="1"></use>
                            <g>
                                <use xlink:href="#change" opacity="1" fill-opacity="0" stroke="#808080" stroke-width="3"
                                    stroke-opacity="1"></use>
                            </g>
                        </g>
                    </g>
                </g>
            </svg>
            <button id="runButton" onclick="runButtonClick()"
                style="background-color:cyan;font-size: 20px;display: inline;">运行</button>
        </div>

        <div id="blocklyDiv" style="height: 480px;width: 600px;margin-left: 450px;margin-top: 20px;"></div>
    </div>
    <xml xmlns="http://www.w3.org/1999/xhtml" id="toolbox" style="display: none;">
        <block type="loop"></block>
        <block type="moveforward_up"></block>
        <block type="moveforward_down"></block>
        <block type="moveforward_left"></block>
        <block type="moveforward_right"></block>
    </xml>

    <xml xmlns="http://www.w3.org/1999/xhtml" id="workspaceBlocks" style="display:none">
        <block type="start" id="1" x="38" y="20"></block>
    </xml>
   <script src="../js11/workspace.js"></script>
    <script src="../js11/game3/game.js"></script>
</body>

</html>